<template>
	<view class="login">
		<!-- 登陆按钮 -->
		<button class="btn" @click="getInfo">授权登录</button>
		<!-- 文本 -->
		<text class="txt">登录后尽享更多权益</text>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex' // vuex
	export default {
		name: "login",
		data() {
			return {
				code: '',
				show:true
			};
		},
		computed: {
			...mapState('user', ['userInfo','token']) // vuex
		},
		methods: {
			...mapMutations('user', ['setUserInfo','setToken']),		

			pass() {
				this.$emit('passFun',this.show)
			},
			
			getInfo() {
				uni.login({
					provider: 'weixin',
					success: (res) => {
						this.code = res.code
						this.getToken()
						this.pass()
					}
				})
			},
			
			// 获取token 
			async getToken() {
				const _that = this
				uni.request({
					url:'https://wechat.atptest.com:44386/connect/token',
					data:{
						code :_that.code,
						grant_type:'wechat'
					},
					method:'POST',
					header:{'content-type':'application/x-www-form-urlencoded','Authorization':'Basic QXBpX1dlYjpBcGlfV2Vi'},
					success(res) {
						_that.setToken(res.data.access_token)
						_that.pass()
					}
				})
				
				// const res = await uni.$http.post('/connect/token',{
				// 	code :this.code,
				// 	grant_type:'wechat'
				// })
				// _that.setToken(res.data.access_token)
				// _that.pass()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		margin-top: 400rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.btn {
			background-color: #3953b8;
			color: #fff;
			width: 80%;
			border-radius: 60rpx
		}

		.txt {
			font-style: 14px;
			margin-top: 20rpx;
			color: #b5c3d7;
		}
	}
</style>
